<template>
	<view class="page" v-if="info.id" style="padding-bottom: 160rpx;">

		<view class="p12">
			<view class="u-flex u-f-jsb bm pb16 mb16 pt10">
				<view>
					<view class="fz16 u-font-bold">{{navTitle}}</view>
					<view class="fz12 mt6">
						<span v-if="info.status==0">超时未支付订单将自动取消</span>
						
						<span v-if="info.status==10">
							{{info.boxDeliverId?'请确认无误后签收并确认收货':'等待商家发货'}}
							</span>
							<span v-if="info.status==20">请确认无误后签收并确认收货</span>
							<span v-if="info.status==30">买家已确认收货</span>
						</view>
				</view>
				<image src="../../../static/image/ic-time.png" class="w40 h40 ml10"></image>
			</view>
			<view class="bg-white brs10 mb20 bm pb16">
				<view class="u-flex" style="align-items: stretch;" v-for="(item,index) in info.items" :key="index">
					<image
						:src="item.picUrl"
						 style="height: 200rpx;width:200rpx" mode="aspectFit"></image>
					<view class="pl12 u-f1 u-flex u-f-jsb" style="flex-direction: column;">
						<view class="fz14 u-flex u-f-jsb" style="width: 100%;">
							{{item.spuName}}
						</view>
						<view class=" u-flex u-f-jsb fz12 c9" style="width: 100%;">规格：{{item.skuName}}<span></span></view>
						<view class="fz14 u-flex u-f-jsb u-font-bold" style="width: 100%;">
							￥{{item.price}}
							<span>x{{item.count}}</span>
							
							<span class="c9" v-if="item.afterSaleStatus==10">申请售后中</span>
							<span class="c9" v-if="item.afterSaleStatus==20">售后完成</span>
							<view v-if="item.isCanRefurn" class="btn1" @click="toRefund(item)" style="font-weight: normal;">申请售后</view>
							
							
						</view>


					</view>
					
				</view>




			</view>
			<view class="bm pb16 mb16">
				<view class="fz12 mt13 u-f-jsb u-flex">
					<span class="c6">商品总价</span>
					￥{{info.totalPrice || 0}}
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex">
					<span class="c6">配送费</span>
					￥{{info.deliveryPrice || 0}}
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex" v-if="info.couponPrice">
					<span class="c6">优惠券抵扣</span>
					-￥{{info.couponPrice || 0}}
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex" v-if="info.vipPrice">
					<span class="c6">会员抵扣</span>
					-￥{{info.vipPrice || 0}}
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex">
					<span class="c6">备注</span>
					
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex" v-if="info.walletAmount">
					<span class="c6">购物金支付</span>
					{{info.walletAmount || 0}}
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex" v-if="info.exchangePoint">
					<span class="c6">积分抵扣</span>
					{{info.exchangePoint || 0}}积分
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex">
					<span class="c6">实付款</span>
					￥{{info.payPrice || 0}}
				</view>
			</view>
			
			<view>
				<view class="fz12 mt13 u-f-jsb u-flex">
					<span class="c6">订单编号</span>
					<view>
						<text class="copy" @click="copy(info.no)">复制</text><text>{{info.no}}</text>
					</view>
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex" v-if="info.logisticsNo">
					<span class="c6">物流信息</span>
					<view>
						<text>{{info.logisticsName}}-{{info.logisticsNo}}</text>
					</view>
				</view>
				
				<view class="fz12 mt13 u-f-jsb u-flex">
					<span class="c6">收货信息</span>
					<view style="text-align: right;">
						<view>{{info.receiverName}} {{info.receiverMobile}}</view>
						<view>{{info.receiverAreaName}} {{info.receiverDetailAddress}}</view>
					</view>
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex">
					<span class="c6">创建时间</span>
					{{info.createTime}}
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex" v-if="info.payTime">
					<span class="c6">付款时间</span>
					{{info.payTime}}
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex" v-if="info.deliveryTime">
					<span class="c6">发货时间</span>
					{{info.deliveryTime}}
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex" v-if="info.receiveTime">
					<span class="c6">收货时间</span>
					{{info.receiveTime}}
				</view>
				<view class="fz12 mt13 u-f-jsb u-flex" v-if="info.givePoint">
					<span class="c6">订单奖励</span>
					{{info.givePoint}}
				</view>
			</view>

		</view>


<!-- <view class="fixed-bottom p15">
				<view class="u-flex u-f-jsb">
					<view></view>
					<view class="btn">确认收货</view>
				</view>

				
			</view> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId:'',
				//nodetype:0:商品准备中;1:已发货;2:已揽件;3:运输中;4:派送中；5：已签收
				sysInfo:getApp().globalData.sysInfo,
				info:"",
				navTitle:"订单详情",
				logistics:{}
			}
		},
		onLoad(e) {
			// e.id=1
			this.orderId=e.id
			this.getInfo();
		},
		onShow() {},
		computed: {},
		methods: {
			toRefund(item){
				this.$db.set('refundInfo',JSON.stringify(item))
				uni.navigateTo({
					url:'/pages/user/order/refund'
				})
			},
			copy:function(txt){
				wx.setClipboardData({
				  data: txt,
				  success (res) {
				    wx.showToast({
						title:"复制成功",
						icon:"none"
					})
				  }
				})
			},
			
			getInfo: function() {
				
				let that=this
				let data = {
					id:that.orderId,
				}
				that.$api.orderInfo(data, res => {
					if (res.code==200) {
						that.info=res.data
					} else {
						this.$common.errorToShow(res.message)
					}
				})
			}
		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>

	.copy{
		padding: 5rpx 10rpx;
		background: #ededed;
		border-radius: 40rpx;
		margin-right: 20rpx;
		line-height: 30rpx;
		font-size: 20rpx;
	}
	.btn {

		width: 184rpx;
		height: 64rpx;
		text-align: center;
		color: #fff;
		line-height: 64rpx;
		background: #70B52C;
		border-radius: 16rpx;
	}

	.btn1 {

		width: 184rpx;
		height: 64rpx;
		text-align: center;
		color: #70B52C;
		line-height: 64rpx;
		background: #fff;
		border: 1px solid #70B52C;
		border-radius: 16rpx;
	}

	.line {
		width: 750rpx;
		height: 4rpx;
		position: relative;
		top: -4rpx;
		background: #F6F9F9;
		border-radius: 0px 0px 0px 0px;
	}

	.status1 {
		color: #E54440;
	}

	.status2 {
		color: #39959B;
	}

	.status3 {
		color: #333;
	}
</style>